<template>
  <div>
    <el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="添加" :visible="showDialog">
      <el-row :gutter="15">
        <el-form ref="UserForm" :model="formUser" :rules="rules" size="medium" label-width="100px">
          <el-col :span="24">
            <el-form-item label="上传头像" prop="avatar">

              <!-- 头衔缩略图 -->
              <pan-thumb :image="image" />
              <!-- 文件上传按钮 -->
              <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
              </el-button>

              <!--
                v-show：是否显示上传组件
                :key：类似于id，如果一个页面多个图片上传控件，可以做区分
                :url：后台上传的url地址
                @close：关闭上传组件
                @crop-upload-success：上传成功后的回调 -->
              <image-cropper v-show="imagecropperShow" :width="300" :height="300" :key="imagecropperKey"
                :url="'/oss/uploadImgFile'" field="file" @close="closeImage" @crop-upload-success="cropSuccess" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="formUser.username" placeholder="请输入用户名" clearable prefix-icon='el-icon-user'
                :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门" prop="department_id">
              <el-select v-model="formUser.department_id" placeholder="请选择部门" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in departmentList" :key="index" :label="item.name" :value="item.id"
                  :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="formUser.nickname" placeholder="请输入昵称" clearable prefix-icon='el-icon-user-solid'
                :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="formUser.sex" size="medium">
                <el-radio v-for="(item, index) in sexOptions" :key="index" :label="item.value"
                  :disabled="item.disabled">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="密码" prop="password">
              <el-input v-model="formUser.password" placeholder="请输入密码" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="formUser.email" placeholder="请输入邮箱" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="电话" prop="birth">
              <el-input v-model="formUser.birth" placeholder="请输入电话" clearable prefix-icon='el-icon-phone'
                :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生日" prop="birth">
              <el-date-picker v-model="formUser.birth" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :style="{width: '100%'}" placeholder="请选择生日" clearable></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import ImageCropper from '../../components/ImageCropper/index.vue'
  import PanThumb from '../../components/PanThumb'
  import {
    deleteImgFile
  } from '../../api/user'
  export default {
    inheritAttrs: false,
    components: {
      ImageCropper,
      PanThumb
    },
    props: {
      dialogVisible: {
        type: Boolean,
        default: false,
      },
      departmentList: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        showDialog: false,
        imagecropperShow: false, // 是否显示上传组件
        imagecropperKey: 0, // 上传组件id
        image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191',
        formUser: {
          avatar: null,
          username: undefined,
          department_id: undefined,
          nickname: undefined,
          sex: undefined,
          password: undefined,
          email: undefined,
          birth: undefined,
          birth: null,
        },
        rules: {
          username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          department_id: [{
            required: true,
            message: '请选择部门',
            trigger: 'change'
          }],
          nickname: [{
            required: true,
            message: '请输入昵称',
            trigger: 'blur'
          }],
          sex: [{
            required: true,
            message: '性别不能为空',
            trigger: 'change'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          email: [{
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          }],
          birth: [{
            required: true,
            message: '请输入电话',
            trigger: 'blur'
          }],
          birth: [{
            required: true,
            message: '请选择生日',
            trigger: 'change'
          }],
        },
        sexOptions: [{
          "label": "男",
          "value": 0
        }, {
          "label": "女",
          "value": 1
        }, {
          "label": "保密",
          "value": 2,
        }],
      }
    },
    computed: {},
    watch: {
      // 监听 addOrUpdateVisible 改变
      dialogVisible(oldVal, newVal) {
        this.showDialog = this.dialogVisible
      },
    },
    created() {},
    mounted() {},
    methods: {
      onOpen() {},
      onClose() {
        this.$refs['UserForm'].resetFields()
        this.$emit("changeShow", false);
      },
      close() {
        this.$emit("changeShow", false);
      },
      handelConfirm() {
        this.$refs['UserForm'].validate(valid => {
          if (!valid) return
          this.close()
        })
      },
      // 上传成功后的回调函数
      cropSuccess(data) {
        //更换头像前的头像url
        var oldImg = this.image
        console.log(data.url)
        this.imagecropperShow = false
        this.image = data.url;
        // 上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
        this.imagecropperKey = this.imagecropperKey + 1
        //删除前一次上传的图片，减少资源浪费
        this.deleteImgFile(oldImg);
      },
      closeImage() {
        this.imagecropperShow = false
        // 上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
        this.imagecropperKey = this.imagecropperKey + 1
      },
      async deleteImgFile(image) {
        const {
          data
        } = await deleteImgFile(image);
        console.log(data);
      }
    }
  }
</script>
<style>
  .el-upload__tip {
    line-height: 1.2;
  }
</style>